import React, { useState, useEffect } from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import { Table } from 'antd';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import LoadingButton from '@mui/lab/LoadingButton';
import Box from '@mui/material/Box';
import { getCollectDataAPI, runCollectDataAPI } from './apis.js'

const AREA_CODE = {
  '钱江世纪城': '330109:34571014',
  '萧山西兴': '330109:35',
  '滨江长河': '330108:26'
}

const AREA_SHIJICHENG = '330109:34571014'
const AREA_XIXING = '330109:35'
const AREA_CHANGHE = '330108:26'

// 创建时间,编号,公司,职位,薪资,一级区域,二级区域,类目,距离,状态
const RulePage = () => {
    const [dataList, setDataList] = useState([]);
    const [loading, setLoading] = useState(false);
    const [clear, setClear] = useState(false);
    const [ areaGroup, setAreaGroup ] = useState({
      [AREA_CODE['钱江世纪城']]: true, 
      [AREA_CODE['萧山西兴']]: true, 
      [AREA_CODE['滨江长河']]: true
    });

    useEffect(()=>{
      getCollectDataAPI().then((result) => {
        setDataList(result)
      })
    }, [])

    const columns = [
      {
        title: '创建时间',
        dataIndex: '创建时间',
      },
      {
        title: '公司',
        dataIndex: '公司',
      },
      {
        title: '职位',
        dataIndex: '职位',
      },
      {
        title: '薪资',
        dataIndex: '薪资',
      },
      {
        title: '一级区域',
        dataIndex: '一级区域',
      },
      {
        title: '二级区域',
        dataIndex: '二级区域',
      },
      {
        title: '状态',
        dataIndex: '状态',
      }
    ];

    const onRun = () => {
      setLoading(true)
      const areaList = []
      for (let k in areaGroup) {
        if(areaGroup[k]) { 
          areaList.push(k)
        }
      }
      console.log('222 ', areaList)
      runCollectDataAPI({
        clear,
        areaList
      }).then((result) => {
        setDataList(result)
        setLoading(false)
      })      
    }

    const onAreaChange = (event) => {
      console.log('2222222 + ', event.target.name, event.target.checked)
      setAreaGroup({ ...areaGroup, [event.target.name]: event.target.checked, })
      const areaList = []
      for (let k in areaGroup) {
        if(areaGroup[k]) { 
          areaList.push(k)
        }
      }
      console.log('222 ', areaList)
    }

    return (
    <div>
      <Box style={{marginLeft: '20px'}}>萧山区：
        <FormControlLabel control={<Checkbox name={AREA_SHIJICHENG} checked={areaGroup[AREA_SHIJICHENG]} onChange={onAreaChange} />} label="钱江世纪城" />
        <FormControlLabel control={<Checkbox name={AREA_XIXING} checked={areaGroup[AREA_XIXING]} onChange={onAreaChange} />} label="西兴" />
        <span style={{paddingLeft: '40px'}}>滨江区：</span>
        <FormControlLabel control={<Checkbox name={AREA_CHANGHE} checked={areaGroup[AREA_CHANGHE]} onChange={onAreaChange} />} label="长河" />
      </Box>
      <Box sx={{
        textAlign: 'right',
        marginTop: '5px',
        marginBottom: '5px',
      }}>
        <ButtonGroup variant="outlined" aria-label="Basic button group">
        <Box style={{height:'40px',lineHeight:'40px', paddingRight:'10px'}}>
          <Checkbox checked={clear} onChange={(e) => {
            setClear(e.target.checked)
          }}/>
          <span style={{position:'relative', top:'2px'}}>清除数据</span></Box>
          <LoadingButton
            loading={loading}
            variant="outlined" 
            onClick={onRun}
          >采集</LoadingButton>
        </ButtonGroup>
      </Box>          
            <Table
              loading={loading}
              columns={columns}
              dataSource={dataList}
              size="small"
              scroll={{ y:39*18}}
              pagination={{ pageSize: 200, total: dataList.length,
                showTotal: (total, range) => { return `第${range[0]}-${range[1]}条  共${total} 条`},
              }}              
            />
        </div>
    );
};

export default RulePage;